<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>用户联系人</title>

  <link rel="stylesheet" href="../lib/bootstrap.min.css">
</head>

<body>
  <!-- 查询表单 -->
  <div class="p-2 d-flex justify-content-end">
    <div class="me-2">
      <input class="form-control" type="text" id="qusername" placeholder="联系人姓名模糊查询">
    </div>
    <div class="me-2">
      <input class="form-control" type="text" id="qphone" placeholder="联系人电话号码模糊查询">
    </div>

    <button id="btnQuery" class="btn btn-success me-2">查询</button>

    <button data-bs-toggle="modal" data-bs-target="#addDialog" class="btn btn-primary">添加</button>
  </div>


  <!-- 数据表格 -->
  <table class="table table-bordered table-hover table-striped">

    <thead>
      <tr class="text-bg-danger">
        <th>联系人姓名</th>
        <th>电话号码</th>
        <th>QQ号码</th>
        <th>微信号码</th>
        <th>信息最后修改时间</th>
        <th>操作</th>
      </tr>
    </thead>

    <tbody id="tbdata"></tbody>

  </table>


  <!-- 分页的部分 -->
  <nav>
    <ul class="pagination justify-content-center">

      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">&lt;&lt;</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">分页信息</a>
      </li>
      <li class="page-item">
        <a class="page-link" href="javascript:void(0)">&gt;&gt;</a>
      </li>


    </ul>
  </nav>

  <!-- 添加的对话框 -->
  <div class="modal fade" id="addDialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">添加联系人信息</h5>

          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="m-2">
            <input id="username" type="text" class="form-control" placeholder="请输入联系人姓名">
          </div>

          <div class="m-2">
            <input id="phone" type="text" class="form-control" placeholder="请输入电话号码">
          </div>

          <div class="m-2">
            <input id="qq" type="text" class="form-control" placeholder="请输入QQ号码">
          </div>

          <div class="m-2">
            <input id="wechat" type="text" class="form-control" placeholder="请输入微信号码">
          </div>

        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
          <button id="btnAdd" type="button" class="btn btn-primary">添加</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 修改的对话框 -->
  <div class="modal fade" id="modifyDialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">修改联系人信息</h5>

          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>
        <div class="modal-body">

          <div class="m-2">
            <input id="musername" type="text" class="form-control" placeholder="请输入联系人姓名">
          </div>

          <div class="m-2">
            <input id="mphone" type="text" class="form-control" placeholder="请输入电话号码">
          </div>

          <div class="m-2">
            <input id="mqq" type="text" class="form-control" placeholder="请输入QQ号码">
          </div>

          <div class="m-2">
            <input id="mwechat" type="text" class="form-control" placeholder="请输入微信号码">
          </div>


        </div>
        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">关闭</button>
          <button id="btnModify" type="button" class="btn btn-primary">保存</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 删除的对话框 -->
  <div class="modal fade" id="delDialog" tabindex="-1">
    <div class="modal-dialog">
      <div class="modal-content">
        <div class="modal-header">
          <h5 class="modal-title">删除联系人信息</h5>

          <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
        </div>

        <div class="modal-body">

        </div>

        <div class="modal-footer">
          <button type="button" class="btn btn-danger" data-bs-dismiss="modal">取消删除</button>
          <button id="btnDel" type="button" class="btn btn-primary">确定删除</button>
        </div>
      </div>
    </div>
  </div>

  <!-- 弹出层提示框 -->
  <div class="toast-container position-fixed bottom-0 end-0 p-3">
    <div id="liveToast" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
      <div class="toast-header">
        <strong class="me-auto">服务器信息</strong>
        <button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
      </div>
      <div class="toast-body">
        联系人信息添加成功
      </div>
    </div>
  </div>

  <script src="../lib/bootstrap.bundle.min.js"></script>

  <script type="module" src="./js/linkman.js"></script>
</body>

</html>